<template>
  <div class="user-info">
    <!-- 自定义顶部导航栏 -->
    <div class="userNavbar" style="">
      <!-- <van-nav-bar
        :title="title"
        class="nav"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      /> -->
      <div class="navbar" @click="onClickLeft">
        <img style="height: 15px" src="../../assets/fanhui.png" alt="" />
        <span style="color: #1989fa; font-size: 14px">返回</span>
      </div>
      <div class="navBarCon">
        <img style="width: 35px;height: 35px; margin-right: 10px" src="@/assets/tg.png" />
        <span style="font-weight: bold; font-size: 15px"
          >赢客松销售管理系统</span
        >
      </div>
    </div>
    <div class="info">
      <div>
        <img :src="userInfo.UserAvatarURL" />
      </div>
      <div>
        <span class="name">{{ userInfo.RealName }}</span>
        <br />
        <van-tag plain type="primary">性别:{{ userInfo.SexText }}</van-tag>
        <!-- <van-tag plain type="success">标签2</van-tag> -->
      </div>
    </div>
    <div class="list">
      <div
        @click="link(item)"
        class="row"
        :class="{ group: item.group }"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="text">
          <van-icon :color="item.color" :name="item.icon" />
          {{ item.text }}
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VolHeader from "@/components/VolHeader.vue";
// 引入工具函数
import util from "../../util/util";
import { Tag, Dialog, Icon } from "vant";
export default {
  components: {
    "vol-header": VolHeader,
    "van-tag": Tag,
    "van-icon": Icon,
  },
  // created() {
  //   this.userInfo = this.$store.getters.getUserInfo();
  // },
  data() {
    return {
      title: "../../assets/tg.png",
      userName: "",
      userInfo: {},
      list: [
        // {
        //   text: "我的报价",
        //   icon: "gold-coin-o",
        //   path: "/price",
        //   color: "#0ebf8f"
        // },
        // {
        //   text: "我的返料",
        //   icon: "envelop-o",
        //   path: "/returnMaterial",
        //   color: "#e00b9c"
        // },
        // {
        //   text: "我的样品",
        //   icon: "home-o",
        //   path: "mysample",
        //   color: "#0ebf8f"
        // },
        // {
        //   text: "发货通知",
        //   icon: "good-job-o",
        //   path: "/delivery",
        //   color: "#F44336",
        //   group: true
        // },
        // {
        //   text: "发货信息",
        //   icon: "chat-o",
        //   path: "/Information",
        //   color: "#FF9800"
        // },
        {
          text: "安全退出",
          icon: "cash-back-record",
          path: "/login",
          color: "#03A9F4",
          group: true,
        },
      ],
    };
  },
  activated() {
    this.getUserList();
  },
  mounted() {
    // let navigatorType = getNavigatorType()
    // if (navigatorType === 'Android') {
    // // 获取文档中的class="navBarCon"的元素
    //   document.querySelector('.navBarCon').style.paddingTop = '20px'
    // }
  },
  methods: {
    // 返回到上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    getUserList() {
      this.http
        .post("/Base_Manage/Home/GetOperatorInfo", {})
        .then((resJson) => {
          console.log(resJson);
          this.userName = resJson.Data.UserInfo.RealName;
          this.userInfo = resJson.Data.UserInfo;
        });
    },

    link(item) {
      if (!item.path) {
        return this.$toast("没有配置好path");
      }
      if (item.path == "/login") {
        Dialog.confirm({
          message: "确定要退出吗",
          confirmButtonColor: "#1989fa",
        })
          .then(() => {
            console.log("退出了");
            //  this.$store.commit("clearUserInfo");
            this.$router.push({ path: item.path });
          })
          .catch(() => {
            console.log(123);
          });
      } else {
        this.$router.push({ path: item.path });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.user-info {
  background: #f5f5f5ee;
  height: 100%;
  .userNavbar {
    padding-left: 20px;
    display: flex;
    align-items: center;
    .navbar {
      display: flex;
      align-items: center;
      font-size: 14px;
      position: absolute;
    }
  }
  .group {
    margin-top: 15px;
  }
}
.navBarCon {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 45px;
  margin: 10px auto;
}
.head {
  top: 0;
  position: fixed;
  background: #03a9f4;
  padding: 0.8rem;
  font-size: 1rem;
  color: white;
  width: 100%;
  z-index: 999;
}
.info {
  padding: 1rem;
  background: #03a9f4;
  color: white;
  font-size: 16px;
  display: inline-block;
  width: 100%;
  > div {
    float: left;
  }
  > div:last-child {
    line-height: 2.2rem;
    margin-left: 2rem;
  }
  img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-right: 0px;
    top: 4px;
    position: relative;

    border: 2px solid #eaeaea;
  }
}
.list {
  margin-top: 13px;

  width: 100%;
  display: inline-block;
  .row {
    background: white;
    cursor: pointer;
    width: 100%;
    padding: 12px 19px;
    border-bottom: 1px solid #f3f3f3;
    display: flex;

    .text {
      font-size: 0.9rem;
      i {
        position: relative;
        font-size: 1.1rem;
        top: 4px;
        margin-right: 5px;
      }
    }
    > div:last-child {
      flex: 1;
      text-align: right;
      padding-right: 35px;
      color: #e4e4e4;
      font-size: 13px;
      /* line-height: 24px; */
      padding-top: 3px;
    }
  }
}
</style>

<style lang="less" scoped>
.vol-index-title {
  // background: white;
  // border-bottom: 1px solid #eee;
  // line-height: 50px;
  // height: 50px;
  // padding-left: 1rem;
  // letter-spacing: 1px;
  display: flex;
  img {
    position: relative;
    height: 17px;
    top: 5px;
    margin-right: 0.5rem;
  }
}
</style>
